Lab Assignment III

Lab Assignment 5

Due date : September 10, 12 PM EST

Total Marks : 42

Today’s Exercise

Topics	Lab Exercises	Points
Introduction to HTML	Exercise #1 Exercise #2 Exercise #3	10 5 5
Drawing Shapes	#1-6 #7-8	2x6 5x2

Important Note:

· Work with your partner collaboratively.

· Work on one computer only.

· Only one partner should upload all assignment files. The other partner will upload only the declaration form.

· Make sure that these two programs compile and run without any error. A program with compiler or runtime error will receive no credit.

Introduction to HTML

HTML is the HyperText Markup Language. It is used to describe how text, images, and multimedia are displayed by Web browsers. In this lab you will learn a little about HTML so that you can create a web page containing headings, interesting fonts, lists, and links as well as applets.

HTML uses tags to describe the layout of a document; the browser then uses these tags to figure out how to display the document. Tags are enclosed in angle brackets. For example, <title> is a tag that indicates that this section contains the title of the document. Many tags, including <title>, have corresponding end tags that indicate where the section ends. The end tags look just like the start tags except that they start with the character /, e.g., </title>. For more information, visit http://werbach.com/barebones/barebones.html .

The following text indicates that the title of the document is Introduction to HTML:

<title>Introduction to HTML</title>

There are a few tags that almost every document will have: <html>, <head>, <title>, and <body>. Here is an example of a simple HTML document:

<HTML>

<HEAD>

<TITLE>Introduction to HTML</TITLE>

</HEAD>

<BODY>

In this lab you will learn about HTML, which is lots of fun

to use. In particular, you will learn how to use fonts,

paragraphs, lists, links and applets in a web page. Now you

can make your own web page for your friends to visit!

</BODY>

</HTML>

To see what this looks like, open the file in the web browser. Change the size of the browser window (click and drag any corner) and see how the text is reformatted as the window changes. Note that the title appears on the window, not as part of the document.

The HEAD of a document (everything between <HEAD> and </HEAD>) contains the introduction to the document. The title goes in the head, but for now we won't use the head for anything else. The BODY of a document (everything between <BODY> and </BODY>) contains everything that will be displayed as part of the document. Both the HEAD and the BODY are enclosed by the HTML tags, which begin and end the document.

This document contains only plain text, but an HTML document can have much more structure: headings, paragraphs, lists, bold and italic text, images, links, tables, and so on. Here is a document containing a heading, two paragraphs, and some fancy font.

<HTML>

<HEAD>

<TITLE>Introduction to HTML</TITLE>

</HEAD>

<H1 align="center">Introduction to HTML</H1>

<P>In this lab you will learn about <I>HTML</I>, which

is lots of fun

to use. In particular, you will learn how to use fonts,

paragraphs, lists, links, and colors in a web page. Now you

can make your <B>own</B> web page for your friends to visit!</P>

<P>Later in this lab you will do some fancier stuff with

applets and graphics and include an applet on your web page.

Can't you just feel the job offers start rolling in?</P>

<U>Yippee!</U>

</BODY>

</HTML>

Run the HTML document to see what this looks like in the browser.

In this document the <H1> tag creates a level 1 heading. This is the biggest heading; it might be used at the beginning of the document or the start of a new chapter. Level 2 through level 6 headings are also available with the <H2> through <H6> tags.

The <P> tag creates a new paragraph. Most browsers leave a blank line between paragraphs. The <B> tag creates bold text, the <I> tag creates italic text, and the <U> tag creates underlined text. Note that each of these tags is closed with the corresponding end tag. The BGCOLOR attribute on the BODY tag sets the background color.

Note that line breaks and blank lines in the HTML document do not matter—the browser will format paragraphs to fit the window. If it weren't for the <P> tag, the blank line between the paragraphs in this document would not show up in the displayed document.

------------------------------------------------------------------------

Exercise #1: Open a new file called MyPage.html. Write a simple web page about yourself. Your page should contain at least the following:

A title (using the <TITLE> tag)
Your name as the author (Two different levels of headings )
Two paragraphs
In the first paragraph, state your education background (i.e., your high school, university, major and minor subjects). The names of your schools will be in italics and the names of your major and minor will be in bold.
In the second paragraph, explain how and why you have chosen your major subject. Underline the most important reason.

When you are done, view your document from the browser. Just type in the URL, don't use File | Open Page.

------------------------------------------------------------------------

More HTML

Lists We often want to add a list to a document. HTML provides two kinds of lists, ordered (e.g., 1, 2, 3) and unordered (e.g., bulleted). A list is introduced with the <OL> or <UL> tag, depending on whether it is ordered or unordered. Each list item is introduced with a <LI> tag and ended with the </LI> tag. The entire list is then ended with </OL> or </UL>, as appropriate. For example, the code below creates the list shown; replacing the <OL> and </OL> tags with <UL> and </UL> would produce the same list with bullets instead of numbers.

Things I like:

<OL>

<LI>chocolate

<LI>rabbits

<LI>chocolate rabbits

</OL>

Things I like:

chocolate
rabbits
chocolate rabbits

------------------------------------------------------------------------

Exercise #2: In the first paragraph, add a list of all courses that you taking in Fall, 2006.

------------------------------------------------------------------------

Links Links connect one document to another. Links are created in HTML with the <A> (anchor) tag. When creating a link you have to specify two things:

· The URL of the document to go to when the link is clicked. This is given as the HREF attribute of the A element.

· How the link should be displayed (that is, what text or image to click on to go to the linked document). This appears between the <A> and </A> tags.

For example, the code below creates the link shown, which goes to a page about the history of computing:

Learn more about <A HREF="http://csc.columbusstate.edu>the department of Computer Science in Columbus State University</A>

Learn more about the history of computing.

------------------------------------------------------------------------

Exercise #3: Add the links of Columbus State University and the webpage of your major department in appropriate places.

------------------------------------------------------------------------

Drawing Shapes

The following is a simple applet that draws a blue rectangle on a yellow background.

// ****************************************************************

// Shapes.java

// The program will draw two filled rectangles and a

// filled oval.

// ****************************************************************

import javax.swing.JApplet;

import java.awt.*;

public class Shapes extends JApplet

{

public void paint (Graphics page)

{

// Declare size constants

final int MAX_SIZE = 300;

final int PAGE_WIDTH = 600;

final int PAGE_HEIGHT = 400;

// Declare variables

int x, y; // x and y coordinates of upper left-corner of each shape

int width, height; // width and height of each shape

// Set the background color

setBackground (Color.yellow);

// Set the color for the next shape to be drawn

page.setColor (Color.blue);

// Assign the corner point and width and height

x = 200;

y = 150;

width = 100;

height = 70;

// Draw the rectangle

page.fillRect(x, y, width, height);

}

Study the code, noting the following:

The program imports javax.swing.JApplet because this is an applet, and it imports java.awt.* because it uses graphics.
There is no main method—instead there is a paint method. The paint method is automatically invoked when an applet is displayed, just as the main method is automatically invoked when an application is executed.
Most of the methods that draw shapes (see the list in Figure 2.12) require parameters that specify the upper left-hand corner of the shape (using the coordinate system described in Section 2.9) and the width and height of the shape. You can see this in the calls to fillRect, which draws a rectangle filled with the current foreground color.
This applet will be drawn assuming the window for drawing (the Graphics object - named page here) is 600 pixels wide and 400 pixels high. These numbers are defined in constants at the beginning of the program. (They currently have no use but you will use them later). The width and height of the applet are actually specified in the HTML file that instructs the Web browser to run the applet (remember applets are executed by Web browsers and Web browsers get their instructions from HTML documents—note that the code executed by the browser is the bytecode for the program, the Shapes.class file). The code in the HTML document is as follows:

<html>

</applet>

</html>

Save the files Shapes.java and Shapes.html to your directory. Now do the following:

1. Compile Shapes.java, but don't run it—this is an applet, so it is run through a browser or a special program called the Applet Viewer.

2. Run the program through your browser. You should see a blue rectangle on a yellow background.

3. Now run the program through the Applet Viewer by typing the command

appletviewer Shapes.html

You should see a new window open displaying the rectangle.

4. Now open the program in your text editor and change the x and y variables both to 0. Save and recompile the program, then view it in the Applet Viewer (this is generally less trouble when making lots of changes than using the browser). What happened to the rectangle?

5. Now change the width to 200 and the height to 300. Save, recompile and run to see how this affects the rectangle.

6. Change x to 400, y to 40, width to 50 and height to 200. Test the program to see the effect.

7. Modify the program so that it draws four rectangles in all, as follows:

· One rectangle should be entirely contained in another rectangle.

· One rectangle should overlap one of the first two but not be entirely inside of it.

· The fourth rectangle should not overlap any of the others.

8. One last touch to the program ... Change the colors for at least three of the shapes so the background and each of the three shapes are different colors (a list of colors is in Figure 2.10 of the text). Also change two of the fillRect methods to fillOval so the final program draws two rectangles and two ovals. Be sure that the overlap rules are still met.

Submit the following files:

· MyPage.html (the final version)

· Shapes.java (the final version)

· Shapes.html (the final version)